<template>
  <div class="metric-card" :class="[`metric-${type}`, { 'metric-hover': hover }]">
    <div class="metric-icon">
      <slot name="icon">
        <span class="default-icon">{{ icon }}</span>
      </slot>
    </div>
    <div class="metric-content">
      <div class="metric-value">{{ value }}</div>
      <div class="metric-label">{{ label }}</div>
      <div class="metric-change" v-if="change">
        <span :class="['change-value', { 'positive': change > 0, 'negative': change < 0 }]">
          {{ change > 0 ? '+' : '' }}{{ change }}%
        </span>
        <span class="change-text">vs 上月</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  value: string | number
  label: string
  icon?: string
  type?: 'default' | 'primary' | 'success' | 'warning' | 'info'
  change?: number
  hover?: boolean
}

withDefaults(defineProps<Props>(), {
  type: 'default',
  hover: true,
  icon: '📊'
})
</script>

<style scoped>
.metric-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-primary::before {
  background: var(--bg-gradient-primary);
}

.metric-success::before {
  background: var(--bg-gradient-success);
}

.metric-warning::before {
  background: var(--bg-gradient-warning);
}

.metric-info::before {
  background: var(--bg-gradient-info);
}

.metric-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.metric-hover:hover::before {
  opacity: 1;
}

.metric-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}

.metric-primary .metric-icon {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #3b82f6;
}

.metric-success .metric-icon {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #10b981;
}

.metric-warning .metric-icon {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #f59e0b;
}

.metric-info .metric-icon {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #3b82f6;
}

.metric-content {
  flex: 1;
  min-width: 0;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.metric-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.metric-change {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.change-value {
  font-weight: 600;
}

.change-value.positive {
  color: #10b981;
}

.change-value.negative {
  color: #ef4444;
}

.change-text {
  color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .metric-card {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .metric-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  
  .metric-value {
    font-size: 1.5rem;
  }
  
  .metric-label {
    font-size: 0.8rem;
  }
}
</style> 